<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是第一个Vue.js案例</title>

</head>
<body>
<div id="app1">
    <!-- 将msg绑定到p元素 -->
    <p>{{price}}</p>
    <p>{{num}}</p>
    <p>{{total}}</p>

    <button @click="add">加一</button>
    <button @click="sub">减一</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   const app = new Vue({
        el: '#app1',
        data: {
            price: 100,
            num: 20,

        },
        computed: {
            total(){
                return this.price* this.num;
            }
        },
        methods: {

            add() {
                this.num++;
            },
            sub() {
                if (this.num > 0) {
                    this.num--;
                } else {
                    this.num = 0;
                }
            }
        },

    })
</script>
</body>

</html>